<template>
	<div id="sync">
		<at-tabs type="border-card" @tab-click="handleClick" v-model="active">
			<at-tab-pane label="新增历史信息" name="add">
			</at-tab-pane>
			<at-tab-pane label="修改历史信息" name="update">
			</at-tab-pane>
			<at-tab-pane label="删除历史信息" name="delete">
			</at-tab-pane>
		</at-tabs>
		<div class="tabPanebox">
			<div class="bottomLine">
			{{this.title}}</div>
			<at-search class="searchFloat" v-model="input" placeholder="请输入用户组名称..." type="text" project='mh'
			 @keyup.enter.native="select" icon="search" :on-icon-click="select"></at-search>
			<div class="tableBox">
				<at-table :data="syncLog" @sort-change="sortChange">
					<at-table-column prop="zr_time" label="更新时间" sortable="custom">
					</at-table-column>
					<at-table-column prop="user_group_id" label="用户组ID">
					</at-table-column>
					<at-table-column prop="auser_group_name" label="用户组名">
					</at-table-column>
					<at-table-column prop="string_agg" label="角色名">
					</at-table-column>
					<at-table-column prop="r_person" label="记录人">
					</at-table-column>
				</at-table>
			</div>
			<Pagination :currentPage="currentPage" :total="total" :pageSizes="pageSizes" :pageSize="pageSize" layout='total, sizes, prev, pager, next, jumper'
		 @current-change="handleCurrentChange" @size-change="handleSizeChange"></Pagination>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'groupsynclog',
	  data () {
	    return {
	      input: '',
	      active: 'add',
	      pageSizes: [20, 40, 80],
	      title: '新增历史信息'
	    }
	  },
	  computed: {
	    currentPage: {
	      get () {
	        return this.$store.state.group.syncLog.pagination.current
	      },
	      set (row) {
	        this.$store.state.group.syncLog.pagination.current = row
	      }
	    },
	    ...mapState({
	      syncLog: state => state.group.syncLog.table, // 列表数据
	      total: state => state.group.syncLog.total, // 列表数据
	      pageSize: state => state.group.syncLog.pagination.pageSize
	    })
	  },
	  methods: {
	    select () {
	      // 搜索
	      this.$store.commit('group/Syncvalue', this.input)
	      this.$store.dispatch('group/getSynclog', { 'type': this.active })
	    },
	    sortChange ({ column, prop, order }) {
	      if (prop) {
	        var data = {
	          'prop': prop,
	          'order': order.substring(0, order.length - 3)
	        }
	        this.$store.commit('group/syncOrdergroup', data)
	        this.$store.dispatch('group/getSynclog', { 'type': this.active })
	      }
	    },
	    getMessage () {
	      this.$store.dispatch('group/getSynclog', { 'type': this.active, 'time': 'ar_time' })
	    },
	    handleSizeChange (el) {
	      this.$store.commit('group/getPageize', el)
	      this.getMessage()
	    },
	    // 显示第几页
	    handleCurrentChange (ev) {
	      this.$store.commit('group/getCurrent', ev)
	      this.getMessage()
	    },
	    handleClick (tab, event) {
	      this.title = tab.label
	      this.currentPage = 1
	      this.input = ''
	      this.$store.dispatch('group/getSynclog', { 'type': tab.name })
	    }
	  },
	  mounted () {
	    this.getMessage()
	  }
	}
</script>
<style>
	#sync .tittle {
		float: left;
	}

	#sync .at-pagination {
		width: 40%;
		margin: 0px auto;
		margin-top: 20px;
	}

	#sync .at-table__body-wrapper {
		overflow: hidden;
	}

	#sync {
		background-color: white;
	}

	#sync .inputsize {
		float: right;
		z-index: 100
	}

	#sync .at-tabs__content {
		width: 100%
	}

	#sync .floatRight {
		float: right;
		z-index: 100;
		position: relative;
		margin-right: 17px
	}
	#allDateSynclog .saas-icon-icon-close{
		font-size: 20px;
    	vertical-align: -5px;
    	margin-right: 5px
	}
	#allDateSynclog .saas-icon-clock
	{
		font-size: 20px;
    	vertical-align: -5px;
    	margin-right: 5px
	}
	.tableBorder{
		border: 1px solid #EEE;
		padding:20px;
	}
	#allDateSynclog .toPathlog {
		margin-top: 10px;
		float: right;
		height: 30px;
		width: 110px;
		margin-right: 20px
	}

	#allDateSynclog .clearLog {
		margin-top: 10px;
		float: right;
		margin-right: 10px;
		height: 30px;
		width: 110px;

	}

	#allDateSynclog .tittleTop {
		display: inline-block;
		margin-top: 20px;
		display: block;
		height: 50px;
		line-height: 50px;
		border: 1px solid #EEE;
		border-bottom: none;
		color: #5c6781;
		font-weight: bold;
		padding-left: 20px;
	}
	.at-table__body-wrapper {
		overflow: hidden;
	}

	#allDateSynclog .inner {
		background-color: white;
		overflow: hidden;
		padding: 0px 20px 0px 20px;
		min-height: 243px;
		overflow: auto;
	}

	.bottomLine {
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #EEE;
		background-color: white;
	}

	.bottomLine>span {
		color: #5c6871;
		font-size: 14px;
		font-weight: bold;
	}
  #allDateSynclog .doubleNum {
	  width: 25px;
	  margin-top: 4px;
	  border-radius: 8.5px;
  }
  #allDateSynclog .singleNum {
    width: 17px;
    border-radius: 50%;
    position: relative;
  }
  #allDateSynclog .more {
    width: 32px;
    border-radius: 8.5px;
  }
  #allDateSynclog .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
  }
  #allDateSynclog .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84) ;
    *font-size:10px;
	}
	#sync .at-tabs--border-card>.at-tabs__header{
		background-color: #ecf0f5;
	}
	#sync .tabPanebox{
		padding: 20px
	}
	#sync .tableBox{
		border: 1px solid #EEE
	}
	#sync .searchFloat {
		float: right;
		margin-top: 20px;
		margin-right: 20px
	}

	#sync .at-tabs--border-card>.at-tabs__header .at-tabs__item {
		transition:none
	}
	#sync .tittle {
		float: left;
	}

	#sync .at-pagination {
		width: 40%;
		margin: 0px auto;
		margin-top: 20px;
	}

	#sync .at-table__body-wrapper {
		overflow: hidden;
	}

	#sync {
		background-color: white;
		padding-bottom: 20px
	}

	#sync .inputsize {
		float: right;
		z-index: 100
	}

	#sync .at-tabs__content {
		width: 100%;
		padding: 0;
	}

	#sync .floatRight {
		float: right;
		z-index: 100;
		position: relative;
		margin-right: 17px;
		margin-top: 10px
	}

	#sync .bottomLine {
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		width: 100%;
		overflow: hidden;
		border: 1px solid #EEE;
		border-bottom: none;
		background-color: white;
		font-size: 12px;
		font-weight: bold;
		color: #5c6781
	}

	#sync .bottomLine>span {
		color: #5c6871;
		font-size: 14px;
		font-weight: bold;
	}
</style>